<template>
  <div class="Stock">
    <el-row>
      <el-col :span="24" class="TextAlignL">
        <h2 style="color: #666;">备货单</h2>
      </el-col>
      <el-col :span="24">
        <el-form ref="conditionForm" :model="conditionForm" label-position="left" label-width="80px">
          <el-row :gutter="20" type="flex" class="row-bg">
            <el-col :span="6">
              <el-form-item label="备货代码">
                <el-input v-model="conditionForm.FNumber" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备货单号">
                <el-input v-model="conditionForm.fbillno" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input v-model="conditionForm.FName" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="" style="margin-top: 7px;">
              <el-button size="mini" type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="width: 100%;height: 4px; border-bottom: 1px dashed #ccc;">
      </el-col>
      <el-col :span="24" class="MarginT_20">
        <el-table id="out-table"
          :data="dataList"
          v-loading="listLoading"
          style="width: 100%">
          <el-table-column
            type="index"
            fixed="left"
            width="50">
          </el-table-column>
          <el-table-column
            property="fstatusName"
            label="审核状态"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fbillno"
            label="备货单号"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fsupply"
            label="供应商"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fnote"
            label="备货要求"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FNumber"
            label="备货代码"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FName"
            label="物料名称"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FModel"
            label="规格"
            width="150">
          </el-table-column>
          <el-table-column
            property="funit"
            label="单位"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fqty"
            label="要求备货数量"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fauxqty"
            label="已备数量"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="getList(scope.row.id)">备货列表</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="toBh(scope.row)">备货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" class="TextAlignR MarginT_20" v-if="dataList.length > 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="sum">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="备货列表" :visible.sync="dialogListVisible" width="450" :close-on-click-modal="false">
      <el-row>
        <el-table id="out-table"
          :data="dataListModal"
          v-loading="listModalLoading"
          style="width: 500px">
          <el-table-column
            type="index"
            fixed="left"
            width="50">
          </el-table-column>
          <el-table-column
            property="fday"
            label="备货月份"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fauxqty"
            label="备货数量"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="create_time"
            label="备货日期"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogListVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="备货" :visible.sync="dialogBhVisible" width="450" :close-on-click-modal="false">
      <el-row>
        <el-col :span="3" class="MarginB_10">备货月份</el-col>
        <el-col :span="20" class="MarginB_10">
          <el-date-picker
            v-model="fday"
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择">
          </el-date-picker>
        </el-col>
      </el-row><el-row>
        <el-col :span="3" class="MarginB_10">备货数量</el-col>
        <el-col :span="20" class="MarginB_10">
          <el-input v-model="fauxqty" clearable placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogBhVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBh">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getQueryParams } from '../util/utils'

export default {
  name: 'StockList',
  data () {
    return {
      listLoading: false,
      listModalLoading: false,
      dialogListVisible: false,
      dialogBhVisible: false,
      dataList: [],
      dataListModal: [],
      fday: '',
      fauxqty: '',
      conditionForm: {
        fsupplierid: null,
        FNumber: '',
        fbillno: '',
        FName: ''
      },
      curPage: 1,
      sum: 0,
      curRow: null
    }
  },
  computed: {
    ...mapState({
      fsupplierid: state => state.fsupplierid
    })
  },
  components: {
  },
  created () {
    this.search()
  },
  methods: {
    onDateChange (value) {
      this.conditionForm.beginDate = value ? value[0] : ''
      this.conditionForm.endDate = value ? value[1] : ''
    },
    search () {
      this.curPage = 1
      this.getStockList()
    },
    handleCurrentChange () {
      this.getStockList()
    },
    toBh (row) {
      this.curRow = row
      this.dialogBhVisible = true
      this.fday = ''
      this.fauxqty = ''
    },
    getStockList () {
      this.listLoading = true
      let formatData = getQueryParams({...this.conditionForm, ...{fsupplier: this.fsupplierid}}, {current: this.curPage, pageSize: 10})
      this.Http.get('/yw_supplier_user/ywSupplierUser/beihuoList', formatData
      ).then(res => {
        if (res.data.success) {
          this.dataList = res.data.result.records
          this.sum = res.data.result.total
          this.listLoading = false
        }
      }).catch((error) => {
        console.log(error)
        this.listLoading = false
      })
    },
    getList (id) {
      this.dialogListVisible = true
      this.listModalLoading = true
      this.Http.get('/yw_supplier_user/ywSupplierUser/beihuoDetailList', { id }
      ).then(res => {
        if (res.data.success) {
          this.dataListModal = res.data.result
          this.listModalLoading = false
        }
      }).catch((error) => {
        console.log(error)
        this.listModalLoading = false
      })
    },
    submitBh () {
      if (!this.fday || !this.fauxqty) {
        this.$message({
          message: '请将备货信息填写完整!!',
          type: 'warning'
        })
        return false
      }
      let formData = {
        beihuoentryid: this.curRow.id,
        fid: this.curRow.fid,
        fauxqty: this.fauxqty,
        fday: this.fday
      }
      this.Http.post('/yw_supplier_user/ywSupplierUser/addBeihuoDetail', formData
      ).then(res => {
        if (res.data.success) {
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
          this.dialogBhVisible = false
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@Padding: 24px;
.Stock{
  width: calc(100% - 2*@Padding);
  background: #fff;
  padding: 0 @Padding @Padding @Padding;
  margin-top: @Padding;
}
</style>
